<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<!-- setup语法糖，写在下面的item（data、methods...）会自动交出去给template用，不用手动return了 -->
<!-- 如果不想为name单独写一个script，需要安装vite-plugin-vue-setup-extend来支持下面这种name的配置方式 -->
<script lang="ts" setup name="Person">
    // 用ref函数创建的数据就是响应式的数据。ref只能用于基本数据类型。
    import {ref} from 'vue'

    // data
    // name、age是响应式的数据，tel都不是
    let name = ref('张三');
    let age = ref(18);
    let tel = '13888888888';

    console.log(name)

    // methods
    function changeName() {
        // 响应式数据需要改变value属性才能改变数据，但是在template直接调用数据名就行
        name.value = 'zhang-san'
    }

    function changeAge() {
        // 响应式数据需要改变value属性才能改变数据
        age.value += 1
    }

    function showTel() {
        alert(tel)
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>